<template>
    <div class="content">

         <!--hot-->
            <div class="hot">
            <div class="hot-title"> <router-link to="/city1">热门城市</router-link></div>
            <ul class="hot-list">
                <li class="hot-item" v-for="item in hotCities" :key="item.id">
                    {{item.name}}
                </li>
            </ul>
        </div>
        <!--sort-->
         <div class="sort">
        <div class="sort-title">字母排序</div>
        <ul class="sort-list">
            <li class="sort-item" v-for="(val,key) in cities" :key="key">
                {{key}}
            </li>
        </ul>
    </div>
        <!--list-->
        <div class="list">
            <div v-for="(val,key) in cities" :key="key">
                <div class="list-title">{{key}}</div>
                    <ul class="list-msg">
                        <li class="list-item" v-for="item in val" :key="item.id">
                            {{item.name}}
                        </li>
                    </ul>   
            </div>
        </div>

    </div>
</template>
<script>
export default {
     props:['cities','hotCities'],
     data(){
         return{

         }
        
     },
      mounted () {

  }

}
</script>
<style lang="stylus" scoped>
.sort-title{
    font-size .26rem
    color #212121
    padding .3rem
}
.sort-list{
    background #fff
    font-size .28rem
    overflow hidden
    position relative
    color #212121
}
.sort-item{
    text-align center
    height .9rem
    line-height .9rem
    float left
    width 16.6666666%
}
.hot-title{
    font-size .26rem
    color #212121
    padding .3rem
}
.hot-list{
    background #fff
    font-size .28rem
    overflow hidden
    position relative
    color #212121
}
.hot-list:before{
    content ""
    position absolute
    height 100%
    width 33.33333%
    left 33.33333%
    border-left .02rem solid #ddd
    border-right  .02rem solid #ddd
}
.hot-item{
    text-align center
    height .9rem
    line-height .9rem
    float left
    width 33.33333%
    border-bottom .02rem solid #ddd
}
.list-title{
    font-size .26rem
    color #212121
    padding .3rem
}
.list-msg{
    position relative
    background #fff
    overflow hidden
}
.list-msg:before{
    content ""
    position absolute
    left 25%
    width 25%
    height 100%
    border-left .02rem  solid #ddd 
    border-right .02rem solid #ddd 
}
.list-msg:after{
    content ""
    position absolute
    left 75%
    width 25%
    height 100%
    border-left .02rem  solid #ddd 
}
.list-item{
    width 25%
    font-size .28rem
    text-align center
    line-height .9rem
    float left
    border-bottom .02rem solid #ddd
    white-space nowrap
    text-overflow ellipsis
    overflow hidden
}
</style>